<template>
	<view>
		<view class="order-item" v-for="(item,index) in orderList" :key="index">
			<view class="status">
				<text>订单编号：{{item.orderNumber}}</text>
				<text style="color: #D80E0E;" v-if="item.state==='1'">待支付</text>
				<text style="color: #D80E0E;" v-if="item.state==='2'">待发货</text>
				<text style="color: #4CD964;" v-if="item.state==='3'">待收货</text>
				<text style="color: #D80E0E;" v-if="item.state==='4'">已完成</text>
				<text style="color: #333333;" v-if="item.state==='5'">退货中</text>
				<text style="color: #999999;" v-if="item.state==='0'">已取消</text>
				<text style="color: #4CD964;" v-if="item.state==='6'">退货成功</text>
				<text style="color: #999999;" v-if="item.state==='7'">退货失败</text>
			</view>

			<!-- 我的商品 -->
			<view class="goods-info" v-for="(itm,idx) in item.itemList" :key="idx" @click="getOrderDetail(item)">
				<view>
					<image :src="itm.imgUrl" class="goods-img"></image>
				</view>
				<view class="title-price-num">
					<view class="title">
						{{itm.productName}}
					</view>
					<view class="price-num">
						<text class="single-price">￥{{itm.price}}</text> <text class="num">x{{itm.num}}</text>
					</view>
				</view>
			</view>


			<view class="totalPrice">
				合计：<text class="total-num">￥{{item.orderPrice}}</text>
			</view>

			<view class="order-time">
				<text>{{item.createDate}}</text>
				<view class="apply" @click="applyReturn(item)" v-if="item.state==='4'">
					申请退货
				</view>
				<view class="cancle" v-if="item.state=='1'" @click="cancleOrder(item)">
					取消
				</view>
				<view class="im-pay" v-if="item.state=='1'" @click="toPay(item)">
					立即付款
				</view>
				<view class="ensure" v-if="item.state=='3'" @click="confirm(item)">
					确认收货
				</view>
				<view class="express" v-if="item.state=='5'|| item.state==='6'|| item.state==='7'"
					@click="returnExpress(item)">
					退款物流
				</view>
				<view class="detail" v-if="item.state=='5' ||item.state==='6'|| item.state==='7'"
					@click="returnDetail(item)">
					退款详情
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		name: "my-orderlist",
		props: {
			orderList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				address: {

				}

			};
		},
		onLoad() {
			uni.setStorage({
				key: 'launchFlag',
				data: true
			});
		},
		methods: {

			// 查看退款物流
			returnExpress(item) {
				console.log(item)
				uni.navigateTo({
					url: '/subpkg/express-detail/express-detail?expNum=' + item.orderNumber
				})
			},
			// 查看退款详情
			returnDetail(item) {
				uni.navigateTo({
					url: '/subpkg/return-detail/return-detail?info=' + JSON.stringify(item)
				})
			},
			// 立即付款
			async toPay(item) {
				// console.log(item)
				const {data:res}=await uni.$http.post('/order/updateOrderId',{
					orderId:item._id,
					userId:this.userInfo._id
				})
				console.log(res,8)
				if(res.success==0){
					uni.navigateTo({
						url: '/subpkg/cashier-desk/cashier-desk?orderNum=' + res.data + '&totalPrice=' + item.price
					})
				}else{
					uni.$showMsg(res.msg)
				}
				
				this.$emit('updateList')
				
			},
			// 确认收货
			async confirm(item) {
				const {
					data: res
				} = await uni.$http.post('/order/confirmOrder', {
					"userId": this.userInfo._id,
					"orderId": item._id,
				})
				console.log(res)
				if (res.success == '0') {
					uni.$showMsg('已确认收货!')
					// // 刷新列表
					// uni.setStorageSync('btnNum','0')
					// uni.setStorageSync('state','0')
					this.$emit('updateList')
					return
				}
			},

			// 点击每个订单，获取的信息详情
			getOrderDetail(info) {
				uni.navigateTo({
					url: '/subpkg/order-detail/order-detail?info=' + JSON.stringify(info)
				})
			},
			// 取消订单
			async cancleOrder(item) {
				console.log(item)
				const {
					data: res
				} = await uni.$http.post('/order/cancelOrder', {
					"userId": this.userInfo._id,
					"orderId": item._id,
				})
				console.log(res)
				if (res.success == '0') {
					uni.$showMsg('订单取消成功！')
					this.$emit('cancle')
					return
				} else {
					this.$emit('failCancle')
				}
			},
			// 跳转到申请退货页面
			applyReturn(item) {
				uni.navigateTo({
					url: '/subpkg/apply-return/apply-return?info=' + JSON.stringify(item)
				})
				// console.log(item)
			}
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			// ...mapGetters('m_user', ['addressStr'])
		}
	}
</script>

<style lang="scss">
	.order-item {
		width: 702rpx;
		// height: 451rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;

		.status {
			height: 30rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #666666;
			display: flex;
			justify-content: space-between;
		}

		.goods-info {
			display: flex;
			margin-top: 60rpx;
			// height: 100rpx;
			// border-bottom: 1rpx solid #ececec;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 26rpx;
				vertical-align: middle;
			}
		}

		.title {
			height: 80rpx;
			overflow: hidden;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 13rpx;
		}

		.price-num {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;

			.single-price {
				font-size: 30rpx;
				font-weight: 500;
				color: #FF1111;
			}

			.num {
				font-size: 30rpx;
				font-weight: 500;
				color: #777777;
			}
		}
	}

	.title-price-num {
		width: 100%;
	}

	.totalPrice {
		font-size: 30rpx;
		font-weight: 500;
		color: #777777;
		text-align: right;

		.total-num {
			font-size: 30rpx;
			font-weight: bold;
			color: #FF1111;
		}
	}

	.order-time {
		height: 152rpx;
		line-height: 152rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.apply,
		.ensure,
		.express,
		.cancle,
		.im-pay,
		.detail {
			width: 148rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border: 1px solid #D80E0E;
			border-radius: 8rpx;
			color: #D80E0E;
		}

		.ensure,
		.im-pay {
			width: 148rpx;
			height: 64rpx;
			background: #D80E0E;
			border-radius: 8rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
